<template>
  <common-page :common-ins="commonIns" :action-bar-data="actionBarData" :columns="columns">
    <dialog-form ref="dialog" :menus="menus" @confirm="commonIns.dialogFn.confirm"></dialog-form>
  </common-page>
</template>

<script setup lang="ts" name="Sencetive">
import { onMounted, ref, watch } from 'vue';

import $api from '@/api/';
import { dialog, useCommon } from '@/hooks/common';
import CommonPage from '@/pages/common/page/index.vue';

import DialogForm from './components/DialogForm.vue';
import { ACTION_BAR_DATA, COLUMNS } from './constants';

const API = $api.system.role;
const actionBarData = ref([...ACTION_BAR_DATA]);
const columns = ref(...[COLUMNS]);
const commonIns = useCommon({ API });

// 菜单
const menus = ref<any[]>([]);
const getMenus = async () => {
  const data = await $api.system.menu.list();

  menus.value = data;
};

onMounted(async () => {
  getMenus();
});

watch(commonIns.selectedRowKeys, (val) => {
  actionBarData.value[1].disabled = !val.length;
});
</script>
